// 信息
function information(save) {
	loadStyle('/css/teacher/teacherinformation.css');
	let templatemessage = `
		<span class="t-title" id='introduce'>信息</span>
		<div class="message-inputgroup">
			<span>表示名</span>
			<input type="text" name="" autocomplete="off" id="nickname" value="" placeholder="必填" required="required" />
		</div>
		<div class="message-inputgroup">
			<span>真实姓名</span>
			<input type="text" name="" autocomplete="off" id="username" value="" placeholder="必填" required="required" />
		</div>
		<div class="message-inputgroup">
			<span>出生地</span>
			<p>（与银行账户一致，否者无法提现）</p>
			<input type="text" name="" id="birthplace" autocomplete="off" value="" placeholder="必填" required="required" />
		</div>
		<div class="message-inputgroup">
			<span>电子邮箱</span>
			<input type="email" name="" autocomplete="off" id="email" value="" placeholder="必填" required="required" />
		</div>
		<div class="language-message">
			<div class="lang-box-first">
				<span>语言</span>
				<span>程度</span>
			</div>
			<div class="select-group-more">
				<div class="chinese-lang">
					<div>
						<strong class="nr-hangyu" id="content">汉语</strong>
					</div>
				</div>
				
				<!-- 选择框 -->
				<div class="select-width">
					<div class="flex-sel">
						<div class="ipts">
							<div class="select-custom">
								<strong class="nr" id="averagelevel">选择水平</strong>
								<i class="iconfont icon-xiang-zuo ic-select"></i>
							</div>
						</div>
					</div>
					<div class="items">
						<strong class="items-btm">母语</strong>
						<strong class="items-btm">精通</strong>
						<strong class="items-btm">高级</strong>
						<strong class="items-btm">中级</strong>
						<strong class="items-btm">初级</strong>
					</div>
				</div>
				<!-- 选择框 -->
			</div>
				<!-- 分割线 -->
				<!-- 		<div class="select-width" style="width:100%">
							<div class="flex-sel">
								<div class="ipts">
									<div class="select-custom">
										<strong class="nr" id="averagelevel">选择水平</strong>
										<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
									</div>
								</div>
								<i class="iconfont icon-shanchu shanchu"></i>
							</div>
							<div class="items">
								<strong class="items-btm">母语</strong>
								<strong class="items-btm">精通</strong>
								<strong class="items-btm">高级</strong>
								<strong class="items-btm">中级</strong>
								<strong class="items-btm">初级</strong>
							</div>
						</div> -->
					<!-- 母语 -->
			
			</div>
			<!-- 添加更多 -->
			<!--<div class="addmore">添加另外一种语言</div> --> 
			<!-- 普通话 -->
			<div class="ordinary">
				<span>普通话水平测试等级</span>
				<div class="select-width" style="width: 100%;margin-top: 8px;">
					<div class="flex-sel">
						<div class="ipts" style="width: 100%;">
							<div class="select-custom" style="display: flex;flex-wrap: wrap;padding: 0px; 20px 0px 10px;">
								<strong class="nr" id="ordinary">未测试</strong>
								<i class="iconfont icon-xiang-zuo ic-select"></i>
							</div>
						</div>
					</div>
					<div class="items" style="width: 100%;">
						<strong class="items-btm">一级甲等</strong>
						<strong class="items-btm">一级乙等</strong>
						<strong class="items-btm">二级甲等</strong>
						<strong class="items-btm">二级乙等</strong>
						<strong class="items-btm">三级甲等</strong>
						<strong class="items-btm">三级乙等</strong>
						<strong class="items-btm">未测试</strong>
					</div>
				</div>
			</div>
			<!-- 普通话 -->
			<div class="price-main">
				<div class="price-box">
					<span>基础单价</span>
					<div><input type="number" min="4" max="80" name="" id="baseprice" value="" /><span>$</span></div>
				</div>
				<div class="price-box">
					<span>第一节体验课</span>
					<div class="btn-flex">
						<button type="button" class="all-btn ban-btn">半额</button>
						<button type="button" class="all-btn">全额</button>
					</div>
				</div>
			</div>
			<div class="text-number-box">
				随时可以调整，整数$4，5,6,7,8,9,10,11...80
			</div>
			<div class="ordinary" style="margin-top: 14px;" id='por'>
				<span>可担任科目</span>
				<div class="select-width" style="width: 100%;margin-top: 16px;">
					<div class="flex-sel">
						<div class="ipts">
							<div class="select-custom es">
							<!--
							<strong class="nr strong-bg" id="content"><span class="wz">日常口语 </span><span class ="tag">×</span></strong>
							-->		
								<i class="iconfont icon-xiang-zuo ic-select"></i>
							</div>
						</div>
					</div>
					<div class="items especial">
						<strong class="items-btm-es">日常口语</strong>
						<strong class="items-btm-es">旅游口语</strong>
						<strong class="items-btm-es">商务汉语</strong>
						<strong class="items-btm-es">儿童汉语</strong>
						<strong class="items-btm-es">HSK</strong>
						<strong class="items-btm-es">BCT</strong>
						<strong class="items-btm-es">YCT</strong>
						<strong class="items-btm-es">TOCFL</strong>
						<strong class="items-btm-es">发音特训</strong>
						<strong class="items-btm-es">汉语语法</strong>
						<strong class="items-btm-es">汉语写作</strong>
						<strong class="items-btm-es">中国文学</strong>
						<strong class="items-btm-es">汉语翻译</strong>
						<strong class="items-btm-es">台湾华语</strong>
						<strong class="items-btm-es">粤语</strong>
						<strong class="items-btm-es">SAT Chinese</strong>
						<strong class="items-btm-es">AP Chinese Langu</strong>
					</div>
				</div>
			</div>
			<div class="message-inputgroup" style="width: 100%;">
				<span>微信名</span>
				<input type="text" name=""  autocomplete="off" id="wxname" value="" placeholder="必填" required="required" />
			</div>
			<div class="message-inputgroup" style="width: 100%;">
				<span>手机号码</span>
				<div class="check-flex">
					<i class="iconfont icon-zhongguo boxsize"></i>
					<input type="text" name=""  autocomplete="off"   class="ph" id="messagephone" value="" placeholder="必填" required="required" />
				</div>
			</div>
			<div class="check-flex">
				<input type="checkbox" name="" id="ipt-check" value="" class="check-box" />
				<label for="ipt-check">我确认我已经满十八岁</label>
			</div>
			
			<div class="btn-save">
				<button type="button" class="next-btn">下一步</button>
			</div>
		</div>`;

	$(function () {
		let p = JSON.parse(localStorage.getItem('params'));
		$('#email').val(p.mailbox);
	});

	// 生成header-list
	function productlist() {
		$('.box-first').eq(0).css('background-color', '#fff');
	}
	// 执行
	productlist();

	teachercontainer[0].innerHTML = templatemessage;
	// 全额和半额选择
	$('.btn-flex button').each(function () {

		$(this).click(function () {
			$('.btn-flex button').each(function () {
				$(this).removeClass('ban-btn');
			});
			$(this).addClass('ban-btn');
		});
	});

	$('.addmore').click(function () {
		// 添加更多语言下拉框添加的内容
		$('.addmore').before($('.select-group').eq(0).clone(true));
	});
	// 添加下拉框切换事件
	function addclick() {
		// 添加下拉框切换事件
		$(".ipts").each(function () {
			$(this).click(function () {
				if ($(this).find('i').hasClass('ic-select-active')) {

					$(this).parent('.flex-sel').siblings('.items').slideToggle("slow");
					$(this).find('i').removeClass('ic-select-active');
					$(this).find('i').addClass('ic-select');
				} else {
					$(this).parent('.flex-sel').siblings('.items').slideToggle("slow");
					$(this).find('i').addClass('ic-select-active');
					$(this).find('i').removeClass('ic-select');
				}
			});
		});
		// 下拉列表内容替换
		$('.items-btm').each(function () {
			$(this).click(function () {

				// 找到下拉框的内容的html进行替换
				let pathselect = $(this).parent('.items').siblings('.flex-sel').find('.select-custom');

				pathselect.find('.nr').html($(this).html());

				pathselect.find('i').removeClass('ic-select-active');
				pathselect.find('i').addClass('ic-select');
				$(this).parent('.items').slideToggle("slow");
				$('.nr').each(function () {
					console.log($(this).html());
				});
			});
		});

		$('.tag').each(function () {
			$(this).click(function () {
				$(this).parent('.strong-bg').remove();
			});
		});
		$('.items-btm-es').each(function () {
			$(this).click(function (e) {

				let projectlang = $(this).html();

				// 防止重复添加
				let templist = [];
				$(".es").find('.wz').each(function () {
					templist.push($(this).html());
				});
				let isadd = templist.some((item) => {
					return projectlang == item;
				});
				if (isadd == false) {
					if ($('.es').has('strong-bg') && $('.es .strong-bg').length < 8) {
						let temp = `<span class="nr strong-bg" id="content"><span class="wz">${projectlang}</span><span class ="tag">×</span></span>`;

						let es = $('.es');

						es.append(temp);

						// 模板添加删除事件
						$('.tag').each(function () {
							$(this).click(function () {
								$(this).parent('.strong-bg').remove();
							});
						});

						// // 找到下拉框的内容的html进行替换
						let pathselect = $(this).parent('.items').siblings('.flex-sel').find('.select-custom');


						pathselect.find('i').removeClass('ic-select-active');
						pathselect.find('i').addClass('ic-select');
						$(this).parent('.items').slideToggle("slow");
					} else {
						Dreamer.warning('只能添加8个', 2000);
					}
				} else {
					Dreamer.warning("请勿重复添加谢谢", 2000);
					if ($('.es').has('strong-bg') && $('.es .strong-bg').length < 8) {
						// 找到下拉框的内容的html进行替换
						let pathselect = $(this).parent('.items').siblings('.flex-sel').find('.select-custom');


						pathselect.find('i').removeClass('ic-select-active');
						pathselect.find('i').addClass('ic-select');
						$(this).parent('.items').slideToggle("slow");
					} else {
						Dreamer.warning('只能添加8个', 2000);
					}
				}
			});
		});
		// 删除
		$('.shanchu').each(function (i) {
			let ind = i;
			$(this).click(function () {
				$('.select-group').eq(ind).remove();
			});
		});
	}
	// 给下拉框加点击事件
	addclick();
	// 所有下拉框隐藏
	$('.items').hide();

	async function submitSave(istrue = false, url) {

		if (!$('#nickname').val()) {
			Dreamer.warning("请填写表示名！", 2000);
		} else if (!$('#username').val()) {
			Dreamer.warning("请填写真实姓名！", 2000);
		} else if (!$('#birthplace').val()) {
			Dreamer.warning("请填写出生地！", 2000);
		} else if (emailtest($('#email').val()) == false) {
			Dreamer.warning("请填写电子邮箱!", 2000);
		} else if ($('#averagelevel').html() == '选择水平' || !$('#averagelevel').html()) {
			Dreamer.warning("请选择水平！", 2000);
		} else if (!$('#ordinary').html()) {
			Dreamer.warning("请选择普通话水平！", 2000);
		} else if (!$('#baseprice').val()) {
			Dreamer.warning("请填写基础单价！", 2000);
		} else if ($(".es").find('.wz').length < 1 && istrue == false) {
			Dreamer.warning("请选择担任科目！", 2000);
		} else if (!$('#wxname').val()) {
			Dreamer.warning("请填写微信昵称!", 2000);
		} else if (phonetest($('#messagephone').val()) == false) {
			Dreamer.warning("请填写手机号码！", 2000);
		} else if ($('#ipt-check').prop('checked') == false) {
			Dreamer.warning("请勾选协议！", 2000);
		} else {

			// 基础单价
			let price = parseInt($('#baseprice').val()) / 2;

			//  0 半额  1全额
			let experiencecurriculum = 0;
			$('.btn-flex button').each(function () {

				if ($(this).html() == '全额' && $(this).hasClass('ban-btn')) {

					price = $('#baseprice').val();
					experiencecurriculum = 1;
				} else {

					price = parseInt($('#baseprice').val()) / 2;

					experiencecurriculum = 0;
				}
			});
			// 基础单价
			let params = {
				'name': $('#nickname').val(),
				'birthplace': $('#birthplace').val(),
				'language': '汉语',
				'degree': $('#averagelevel').html(),
				'ordinary': $('#ordinary').html(),
				'wechat': $('#wxname').val(),
				'phone': $('#messagephone').val(),
				'age': 1,
				'dialect': '中文',
			};

			if (istrue) {
				params.token = localStorage.getItem('Token');
			} else {
				params.real_name = $('#username').val();
				params.details = $('#email').val();
				params.price = price;
				params.experiencecurriculum = experiencecurriculum;
			}


			let res = await ajax(url, params, 'post');

			// 为true 即为保存操作
			if (istrue) {

				if (res.code == 200) {

					Dreamer.info('保存成功', 2000);
					console.log(params);

				} else {

					Dreamer.warning('保存失败', 2000);
				}

			} else {

				// 获得担任科目数据
				let projectlist = [];

				$(".es").find('.wz').each(function () {

					projectlist.push($(this).html());
				});

				// 转换后端所需要的格式
				let paramstwo = {
					'skillname1': [],
				};

				projectlist.forEach((item, index) => {
					let obj = {
						skillname: '',
						'state': 1,
						'create_time': getDate(),
						'teacherid': localStorage.getItem('user_Id'),
					};
					obj.skillname = item;
					paramstwo.skillname1.push(obj);
				});

				console.log(paramstwo);
				console.log('params', params);
				console.log(projectlist);

				let resp = await ajax('skill_addition', paramstwo, 'post');

				if (res.code == 200 && resp.code == 200) {
					console.log(params);
					console.log(paramstwo);
					localStorage.setItem('inforuser', $('#nickname').val());
					Dreamer.info('提交成功', 2000);
					photo();
					// description();
				} else {
					Dreamer.warning('提交失败', 2000);
				}
			}
		}
	}

	// 信息下一步
	$('.next-btn').click(function () {

		debounce(submitSave, 300, false, 'Secondary_registration');


		// submitSave(false, 'Secondary_registration')

	});

	// 保存按钮生成
	if (save) {
		$('#introduce').html('介绍');
		$("#por").hide();
		savebtn();
		$('.save-btn').click(function () {


			debounce(submitSave, 300, true, 'teacher_self_introduction_update');

			// submitSave(true, 'teacher_self_introduction_update');

		});
		$(function () {

			let messageList = JSON.parse(localStorage.getItem('archives'));

			let { data } = messageList;

			$("#username").attr('disabled', true),
				$('#baseprice').attr("disabled", true),
				$('#email').attr("disabled", true),

				$('#nickname').val(data[0].name),
				$('#username').val(data[0].teachername),
				$('#birthplace').val(data[0].birthplace),
				$('#averagelevel').html(data[0].degree),
				$('#ordinary').html(data[0].ordinary),
				$('#wxname').val(data[0].wechat),
				$('#messagephone').val(data[0].phone),
				$('#email').val(data[0].mailbox),
				$('#baseprice').val(data[0].price),


				$('.btn-flex button').each(function () {
					$(this).removeClass('ban-btn');
				});

			data[0].experiencecurriculum == 0 ? $('.btn-flex button').eq(0).addClass('ban-btn') : $('.btn-flex button').eq(1).addClass('ban-btn');

			$('.btn-flex button').unbind();
			data[0].age == 1 ? $('#ipt-check').prop('checked', true) : $('#ipt-check').prop('checked', false);
		});

	}
}

// 照片
let photo = (save) => {

	loadStyle('/css/teacher/photo.css');

	let templatephoto = `
			<span class="t-title">照片</span>
			<div class="photo-box">
				<div>
					<div class="btn-box">
						<button type="button" class ="upload">上传图片</button>
						<span>JPG或PNG格式最大300k</span>
					</div>
					<div class="file-box">
						<span id='upfile'>上传图片</span>
						<input type="file" name="" accept="image/jpeg,image/x-png" id="" value="" class="ocp"/>
					</div>
				</div>
				<div>
				
					<div class="imgs-box">
						<img src="/static/photo/photo-example-first.png" alt="photo-example-first.png">
						<img src="/static/photo/photo-example-second.png" alt="photo-example-second.png">
						<img src="/static/photo/photo-example-third.png" alt="photo-example-third.png">
					</div>
					<div class="img-tips">
						<i class="iconfont icon-dagou dagousize"></i><label>微笑看镜头</label>
						<i class="iconfont icon-dagou dagousize"></i><label>显示头和肩膀</label>
						<i class="iconfont icon-dagou dagousize"></i><label>居中直立</label>
						<i class="iconfont icon-dagou dagousize"></i><label>脸部和眼睛清晰可见</label>
						<i class="iconfont icon-dagou dagousize"></i><label>无联系信息等标志</label>
						<i class="iconfont icon-dagou dagousize"></i><label>仅您本人</label>
					</div>
				</div>
			</div>
			<div>
				<div class="btn-group m-photo-top btn-save">
					<button type="button" class="photoback">返回</button>
					<button type="button" class="nextphoto">下一步</button>
				</div>
			</div>
			`

	let teachercontainer = document.getElementsByClassName('teach-container');
	teachercontainer[0].innerHTML = templatephoto;
	productlist(2);

	$('.cropper-mask').hide();
	let ischange = false

	$(".ocp").change(function () {
		ischange = true
		$('.cropper-mask').show();
		upfile();
	});

	// 是否上传图片
	let isupload = false;


	// 获取初始数据
	let datas;

	// 图片上传路径
	let url;


	// 上传图片到oss
	async function sendImage() {

		let fileimg
		// let canvas = document.createElement('canvas')

		// let ctx = canvas.getContext('2d')

		// let i = document.getElementById('#image');

		// ctx.drawImage(i, 0, 0, 200, 150);

		if (save) {
			if (ischange == false) {

				fileimg = datas.teacherimg;

			} else {

				// fileimg = $('.ocp').get(0).files[0];



				// console.log(url)

				// fileimg = $('#image').attr('src');
				fileimg = url

			}
		} else {

			// fileimg = $('.ocp').get(0).files[0];
			// fileimg = $('#image').attr('src');
			// console.log(url)

			fileimg = url


		}


		if (fileimg) {
			if (save) {

				let res = await upload('getSign', fileimg)

				let getimg = await getupload(fileimg, res);

				let upimg = await ajax('teacher_img_update', { 'teacherimg': getimg.url }, 'post')

				if (getimg.code == 200) {
					localStorage.setItem('headimg', getimg.url);
					isupload = true;
					Dreamer.info("上传成功", 3000);

					let updatemessage = JSON.parse(localStorage.getItem('params'))

					let params = {

						'mailbox': updatemessage.mailbox,
						'password': updatemessage.password

					}
					let res = await ajax('login', params, 'POST');
					localStorage.setItem('information', JSON.stringify(res.data));

					let information = JSON.parse(localStorage.getItem('information'));

					$('.avatar').attr('src', information.teacherimg)

				} else {
					Dreamer.warning('上传失败!', 2000);
				}
			} else {
				let res = await upload('getSign', fileimg);

				let getimg = await getupload(fileimg, res);

				console.log(getimg)

				if (getimg.code == 200) {
					localStorage.setItem('headimg', getimg.url);
					isupload = true;
					Dreamer.info("上传成功", 3000);
					description();
				} else {
					Dreamer.warning('上传失败!', 2000);
				}
			}
		} else {
			Dreamer.warning('请先上传图片!', 2000);
		}
	}

	$(".upload").click(function () {

		debounce(sendImage, 300, false)


	})
	// 照片取消和下一步
	$('.nextphoto').click(async function () {
		if (isupload) {
			description();
		} else {
			Dreamer.warning("请先上传图片!", 2000);
		}
	})

	// 上一步
	$('.photoback').click(function () {
		information();
	})

	document.getElementsByTagName('body')[0].addEventListener("dragover", function (event) {
		event.preventDefault();
	}, false)

	document.getElementsByClassName('ocp')[0].addEventListener("dragover", function (event) {
		event.preventDefault();
	}, false)

	document.getElementsByClassName('ocp')[0].addEventListener("drop", function (event) {
		event.preventDefault();
		upfile();
	}, false)


	let $image = $('#image');


	// 图片检测预览方法
	function upfile() {


		var flie = $('.ocp').get(0).files[0];


		console.log('file', flie)

		if (!/.(jpg|png)$/.test(flie.name)) {

			Dreamer.warning("图片类型必须是jpg,png中的一种");
			$('#cropper-mask').hide();
			return false;

		}

		if (((flie.size).toFixed(2)) >= (300 * 1024)) {

			Dreamer.warning("请上传小于300k的图片");
			$('#cropper-mask').hide();

			return false;
		}

		var reader = new FileReader();

		reader.readAsDataURL(flie);

		reader.onload = function () {
			$(".file-box").find("span").html(" ");

			// $(".file-box").css("background-image", `url(${reader.result})`);

			// $('#image').attr('src', reader.result)

			$image.cropper({
				aspectRatio: 1,
				preview: '.small',
			})


			$image.cropper('replace', reader.result);


		}
		reader.onerror = function (e) {
			console.log(e);
		}
		reader.onprogress = function (e) {
			var percent = e.loaded / e.total * 100 + '%';
			console.log(percent);

		}
	}

	// 旋转
	$('#rotate').click(function () {

		$image.cropper("rotate", 90);

	})

	// 裁剪
	$('#download').click(function () {

		var dataURL = $image.cropper("getDataURL", '"image/png"');


		//**dataURL to blob**
		function dataURLtoBlob(dataurl) {
			debugger
			var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new Blob([u8arr], { type: mime });
		}

		//**blob to dataURL**
		function blobToDataURL(blob, callback) {
			var a = new FileReader();
			a.onload = function (e) { callback(e.target.result); };
			a.readAsDataURL(blob);
		}


		url = dataURLtoBlob(dataURL);


		$(".file-box").css("background-image", `url(${dataURL})`);

		$(".cropper-mask").hide();

	})



	// 档案初始化获取图片
	function loadimg() {
		if (save) {
			let d = JSON.parse(localStorage.getItem('archives')).data[0];

			datas = d;
			console.log(d);
			$(".file-box").find("span").html(" ");
			$(".file-box").css("background-image", `url(${d.teacherimg})`);
		}
	}

	// 生成保存按钮
	if (save) {
		savebtn();
		loadimg();
		$(".save-btn").on("click", function () {
			if (ischange) {
				if (isupload) {
					Dreamer.info('保存成功', 2000);
				} else {
					Dreamer.warning('请先上传图片！', 2000);
				}
			} else {
				Dreamer.info('保存成功', 2000);
			}

		})

	}
}

// 描述
let description = (save = false) => {
	loadStyle('/css/teacher/teacherdescription.css');

	let headimg;
	if (save) {

		headimg = JSON.parse(localStorage.getItem('information')).teacherimg;

	} else {

		headimg = localStorage.getItem('headimg');

	}


	let templatedescripton = `
			<span class="t-title">描述</span>
			<div class="d-box">
				<span> 
						将显示在寻找老师的页面，还有您的档案上。<br>
						建议汉语和其他外语并用
				</span>
				<div class="d-box-first">
					<img src=${headimg} alt="example.png">	
					<div>
						<span id='dusername' style='margin-bottom:8px'>inyu</span>
						<span style='margin-bottom:4px'>标题</span>
						<input type="text" name="" id="personsay"  value=""  autocomplete="off"
								placeholder="具有5年经验的老师  5 years of experience tutor" />
					</div>
				</div>
				<div class="d-textarea">
					<span>简短介绍自己，分享您的兴趣爱好</span>
					<textarea rows="" cols=""  id="text1"   minlength="400" placeholder="你好，我叫。。。我来自。。。我喜欢。。。&#10Hello, my name is. . . I come from. . . I like. . . "></textarea>
					
				</div>
				<div class="d-textarea">
					<span>您的教学经验，学历，优势等等</span>
					<textarea rows="" cols="" id="text2"  minlength="400" placeholder="我有5年教中文的经验。获得了对外汉语教师资格。上海大学毕业。我可以和你用英文沟通。I have 5 years experience in teaching Chinese. Obtained the qualification of&#10teaching Chinese as a foreign language. Graduated from Shanghai University.&#10I can communicate with you in English."></textarea>
				</div>
				<div class="d-textarea">
					<span>鼓励学生和你一起上课</span>
					<textarea rows="" cols="" minlength="400"  id="text3" placeholder="我们一起来学汉语吧。我将聆听你的想法，和你一制定学习计划，帮助你实现目标。&#10Let's learn Chinese together. I will listen to your ideas and work out a study plan with you to help you achieve your goals."></textarea> 
					<div class="d-tips">
						<span>至少400字</span>
						<span><span id="num" style="display: inline-block;">0</span>/400</span>
					</div>
				</div>
				<div class="btn-group m-d-top btn-save">
					<button type="button" class="d-back">返回</button>
					<button type="button" class="d-next">下一步</button>
				</div>
			</div>`
	let teachercontainer = document.getElementsByClassName('teach-container');

	teachercontainer[0].innerHTML = templatedescripton;

	productlist(3);

	let desList = localStorage.getItem('archives') ? JSON.parse(localStorage.getItem('archives')).data[0] : ''

	// 如果是档案 就使用数据库的name，不然就是注册信息缓存中的name
	if (save) {
		$("#dusername").html(desList.teachername);
	} else {
		$("#dusername").html(localStorage.getItem('inforuser'));
	}

	var totallength;
	// 计算字数最小数量
	$('textarea').bind('input propertychange', function () {
		totallength = '';

		$('.d-textarea textarea').each(function () {
			totallength += $(this).val();
		})
		console.log(totallength.length)

		$('#num').html(totallength.length);

	})
	// 计算字数限制
	$('.d-back').click(function () {
		photo();
	})


	async function details(url) {

		if (totallength.length < 400) {

			Dreamer.error("字数至少400个", 2000);
			return false

		}

		if (totallength.length > 1000) {

			Dreamer.error("字数至多1000个", 2000);
			return false

		}

		let personsay = $("#personsay").val();
		let t1 = $("#text1").val();
		let t2 = $("#text2").val();
		let t3 = $("#text3").val();

		if (!personsay) {
			Dreamer.warning("请输入个人描述", 2000);
		} else if (!t1) {
			Dreamer.warning("请输入自我介绍", 2000);
		} else if (!t2) {
			Dreamer.warning("请输入教学经验", 2000);
		} else if (!t3) {
			Dreamer.warning("请输入鼓励词语", 2000);
		} else {

			let params = {
				'teacherimg': headimg,
				'teachername': save ? desList.teachername : localStorage.getItem('inforuser'),
				"title": personsay,
				"selfintroduction": t1,
				"experience": t2,
				"encourage": t3,
				"create_time": getDate(),
				"state": 0
			}

			let res = await ajax(url, params, 'post')
			if (res.code == 200) {
				Dreamer.info("保存成功", 2000);
				if (save == false) {
					teachervideo();
				}
			} else {
				Dreamer.warning("保存失败", 2000);
			}

		}
	}

	$('.d-next').click(async function () {

		debounce(details, 300, 'details')

		// details('details');
	})

	if (save) {
		savebtn();


		// 保存处理
		$(".save-btn").click(function () {
			// details('teacher_information_update')
			debounce(details, 300, teacher_information_update)
		})


		// 获取用户基础信息,例如图片，标题，名称
		$("#personsay").val(desList.title)
		$("#text1").val(desList.selfintroduction);
		$("#text2").val(desList.experience);
		$("#text3").val(desList.encourage);

		let content = [desList.selfintroduction, desList.experience, desList.encourage]
		totallength = '';
		content.forEach(function (item) {
			totallength += item
		})
		$('#num').html(totallength.length);

	}
}

// 申请审核  审核网络稳定
let teachcheck = (save) => {
	loadStyle('/css/teacher/teachercheck.css');
	let templatecheck = `
			<span class="t-title">申请审核中</span>
						<div class="submitsccuess">
							<i class="iconfont icon-dagou1 dagou"></i>
							<div class="sub-right">
								<label>提交完成</label>
								<span class="send">已发送邮件给...@....,请确认</span>
								<button type="button" class="sub-btn"  id="checkbtns">重新发送邮件</button>
								<button type="button" class="btn-two"  id="checkhidebtns">60</button>
								<span class="sub-tips">在3个工作日内，我们会发&#10邮件告诉您申请状态&#10谢谢</span>
							</div>
						</div>
				
					<div class="submitsccuess check-top">
						<i class="iconfont icon-wuwangluo wifi-bad bad"></i>  
						<i class="iconfont icon-wangluo wifi-good  good"></i>  
							<div class="sub-right">
							<label class="sub-wifi-tip-bad bad">网络不稳定</label>  
							<label class="sub-wifi-tip-good good">网络稳定</label>  
								<span class="sub-situation-tip bad">根据您现在的网速，无法在课堂中进行良好的音频或者视频交流</span>
								<span class="sub-situation-tip good">根据您现在的网速，可以在课堂中进行良好的音频，视频交流</span>
								<div class="sub-situation">
									<label class="test-time">上次检查时间：10：20</label>
									<button type="button" class="sub-btn-test ">重新检查网速</button>
								</div>
								<div class="sub-footer">
									<span>认证</span>
									<div class="sub-photo">
										<input type="file" name="" accept="image/jpeg,image/x-png" id="checkfiles" value=""/>
									</div>
									<label>
										普通话水平测试等级证书
										CTCSOL（国际汉语教师证书）
										其他资格证明，学历证明等等
									</label>
								</div>
								<button type="button" class="uploads">上传</button>
							</div>
						</div>`

	let teachercontainer = document.getElementsByClassName('teach-container');

	teachercontainer[0].innerHTML = templatecheck;


	// 检测网络
	function testCheck() {

		let d = new Date();

		console.log(d.getHours(), d.getMinutes())

		let dateTime = `上次检查时间：${d.getHours()} : ${d.getMinutes()}`;
		$('.test-time').html(dateTime);

		if (window.navigator.onLine) {

			Dreamer.info('网络状态良好', 2000)
			$('.bad').hide();

		} else {

			Dreamer.error('网络状态不稳定', 2000)
			$('.good').hide();

		}
	}
	// 初始化测试一下
	testCheck();


	// 点击重复测试
	$('.sub-btn-test').click(function () {

		throttle(testCheck, 300)

	})


	$(async function (params) {
		let email = JSON.parse(localStorage.getItem('params')).mailbox;
		let resp = await ajax('teacher_sendEmail', { 'email': email }, 'get');

		if (resp && resp.code == 200) {

			Dreamer.info('发送成功', 2000);

		} else {

			Dreamer.warning('发送失败', 2000);

		}
	})

	function timeSet(showBtn, hideBtn) {

		let second = 60;
		let ting = setInterval(() => {

			if (second < 1) {
				$(hideBtn).show();
				$(showBtn).hide();
				clearInterval(ting);
				second = 60;
			} else {
				second--;
				$(showBtn).html(second + 's')
			}
		}, 1000)
	}

	$('.btn-two').hide();
	$('#checkbtns').click(async function () {
		$('#checkbtns').hide();
		$('#checkhidebtns').show();
		timeSet('#checkhidebtns', '#checkbtns');
		Dreamer.info('发送成功', 2000);
		// let email = JSON.parse(localStorage.getItem('params')).mailbox;
		// let resp = await ajax('teacher_sendEmail', { 'email': email }, 'get');
	})

	async function sendprize() {
		let checkfileimg = $('#checkfiles').get(0).files[0];

		if (checkfileimg) {

			let res = await upload('getSign', checkfileimg)

			let getimg = await getupload(checkfileimg, res);

			if (getimg.code == 200) {

				Dreamer.info("上传成功", 3000);
				// 直接快捷登录
				publicLogin()

			} else {
				Dreamer.warning('上传失败!', 2000);
			}
		} else {
			Dreamer.warning('请先上传证书!', 2000);
		}
	}

	$('.uploads').click(function () {


		debounce(sendprize, 300)

	})






	$('#checkfiles').change(function () {
		// 上传图片方法
		var flie = $('#checkfiles').get(0).files[0];

		if (!/.(jpg|png)$/.test(flie.name)) {

			Dreamer.warning("图片类型必须是jpg,png中的一种");
			return false;

		}

		if (((flie.size).toFixed(2)) >= (300 * 1024)) {

			Dreamer.warning("请上传小于300k的图片");
			return false;
		}

		var reader = new FileReader();

		reader.readAsDataURL(flie);

		reader.onload = function () {
			$(".sub-photo").css("background-image", `url(${reader.result})`);
		}
		reader.onerror = function (e) {
			console.log(e);
		}
		reader.onprogress = function (e) {
			var percent = e.loaded / e.total * 100 + '%';
		}
	})

	productlist(6);

	// 保存按钮生成
	if (save) {
		savebtn();
	}
};

// 视频
let teachervideo = (save = false) => {
	loadStyle('/css/teacher/teachervideo.css');
	let templatvideo = `
		<span class="t-title">短视频</span>
		<span class="v-tips">向学生展示您的风采！提交之前可以观看，修改。</span>
		<div class="v-main">
			<div id="test">
				 <video controls src="" class= "v-left" style=' object-fit: fill' autoplay >
                    
                </video>
			<!--	<div class="v-btn-group">
					<button type="button">开始录制</button>
					<button type="button">重新录制</button>
				</div>
			-->
			</div>
			<div class="v-right">
				<p>提示</p>
				<p>30秒至2分钟之间</p>
				<p>横向模式</p>
				<p>水平方向</p>
				<p>没有联系方式等标志</p>
				<p>无联系信息等标志</p>
				<p class="v-top">跟学生热情打招呼</p>
				<p>展示自己资格</p>
				<p>介绍自己的教学经验，方法</p>
				<p>鼓励学生约自己的课</p>
			</div>
		</div>
		<div class="v-desription">
			<span>或黏贴视频链接  如：抖音Youtube</span>
			<input type="text" name=""  id="linkvideo" value=""/>
		</div>
		<button type="button" class="save-btn-video" id ="tops">
			<input type="file" class="vfiles" accept="video/*">
			本地上传视频
		</button>
		<div class="btn-group m-d-top btn-save" id = 'videotemplate'>
			<button type="button" class="v-back">返回</button>
			<button type="button" class="v-next">下一步</button>
		</div>
		`
	let teachercontainer = document.getElementsByClassName('teach-container');

	teachercontainer[0].innerHTML = templatvideo;
	productlist(4);

	// 判断是视频链接还是本地上传
	let islocal = true

	// 获取视频链接
	$("#linkvideo").bind('input propertychange', function () {

		islocal = false

		$('.v-left').attr('src', $(this).val())

	});


	$('.v-back').click(function () {

		description();
	})

	// https://www.w3school.com.cn/example/html5/mov_bbb.mp4
	// https://www.runoob.com/try/demo_source/movie.mp4


	// 文件对象
	let filesobject;

	// 视频接口提交
	async function apivideo(urls) {

		let localAddress;
		if ($('.v-left').attr('src')) {

			if (islocal) {

				let f = filesobject;


				console.log(f)
				console.log(filesobject)

				let res = await upload('getSign', f)

				let getvideo = await getupload(f, res);

				localAddress = getvideo.url

			} else {

				localAddress = $('.v-left').attr('src');

			}


			let params = {
				state: 1,
				create_time: getDate(),
				video: localAddress
			}


			let res = await ajax(urls, params, 'post')

			if (res && res.code == 200) {

				if (save) {

					Dreamer.info('保存成功', 2000);

				} else {

					Dreamer.info('上传成功', 2000);

					teacherclass();
				}

			} else {

				Dreamer.warning('添加视频异常', 2000)

			}

		} else {

			Dreamer.warning('请添加视频或者链接', 2000)

		}
	}



	$('.v-next').click(async function () {


		debounce(apivideo, 300, 'video')
		// apivideo('video');

	})


	// 生成保存按钮
	if (save) {


		let messageList = JSON.parse(localStorage.getItem('archives'));

		let { data } = messageList

		$('.v-left').attr('src', data[0].video)

		// 隐藏多余部分按钮
		$('#tops').hide();

		let vttemp = `<button type="button" class="save-btn-video" >
			<input type = "file" class= "vfiles"  accept = "video/*">
			本地上传视频</button >`

		savebtn();

		$('#videotemplate').prepend(vttemp);

		$('.save-btn').click(function () {

			// apivideo('update_video');
			debounce(apivideo, 300, 'update_video')

		})

	}



	// 上传视频
	$('.vfiles').change(function () {

		// 确认上传方式
		islocal = true

		// 获取文件上传video参数
		filesobject = $(this).get(0).files[0];

		let files = $(this).get(0).files[0];

		// let blob = new Blob([files], { type: 'video/mp4' });

		const reader = new FileReader();

		reader.readAsDataURL(files)

		// let urls = window.URL.createObjectURL(files)

		// $('.v-left').attr('src', urls)

		reader.onload = (ev) => {

			$('.v-left').attr('src', ev.target.result)

			reader.onloadend = function (e) {

				let percent = e.total / e.loaded * 100 + '%'
				console.log(percent)
			}

		}

	})

}

// 授课时间
let teacherclass = (save) => {
	loadStyle('/css/teacher/teachclass.css');

	let nowtimearea = Intl.DateTimeFormat().resolvedOptions().timeZone;
	let teachclass =
		`
	<span class="t-title">你的时区</span>
	<span class="h-span">正确的时区设定非常重要，因为您的学生遍布世界各地</span>
	<div class="h-select">
		<span class="h-title">当前您的时区</span>
		<div class="timeareas">
					<input  id="zone" class= "zoneipt" value='${nowtimearea}' disabled></input>
					<!-- <i class="iconfont icon-xiang-zuo ic-select" id="ele"></i> -->	
		</div>
		<!--
		<div class="items" id="first">
			<strong class="items-btm">1</strong>
			<strong class="items-btm">2</strong>
			<strong class="items-btm">3</strong>
			<strong class="items-btm">4</strong>
		</div>
		-->	
		<span class="t-title h-top">设置您的授课时间</span>
		<span class="">学生会根据您可能的时间来预约</span><br />
		<div class="h-flex h-t-top">
			<i class="iconfont icon-remen h-i-size"></i>
			<span class="">很多学生在21：00-24：00约课，最好留出来</span>
		</div>
		<div class="h-checkbox">
			<!-- <div class="h-flex-time">
				<div class="h-flex h-p-b">
					<input type="checkbox" name="" id="t-label" value="" /><label for="t-label" class="h-label"></label>
				</div>
				<div class="h-flex time-group">
					<div class="ipts-time">
						<div class="select-custom-time">
							<strong class="nr-time">00 : 00</strong>
							<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
						</div>
						<div class="items-time" id="first">
						</div>
					</div>
					<span class="h-margin">至</span>
					<div class="ipts-time">
						<div class="select-custom-time">
							<strong class="nr-time">00 : 00</strong>
							<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
						</div>
						<div class="items-time" id="first">
						</div>
					</div>
					<i class="iconfont icon-shanchu box-size"></i> 
					<i class="iconfont icon-shizijiahao3 box-size"></i>
				</div> 
			</div> -->
		</div>
		<span>第一节体验课的时间段，以后最好也可以。</span><br/>
		<span>否则的话，学生以后无法正式约课，你也没有收入</span>
	</div>
	<div class="btn-group btn-save">
		<button type="button" class ="t-back">返回</button>
		<button type="button" class ="t-submit">完成注册</button>
	</div>
	`
	let teachercontainer = document.getElementsByClassName('teach-container');

	teachercontainer[0].innerHTML = teachclass;

	productlist(5);
	$('.items').hide();
	$('.items-time').hide();

	$('.t-back').click(function () {
		teachervideo()
		changehtml('teachervideo');
	})


	async function sendClass() {


		console.log($(".h-flex-time").length);

		let TIME = [];

		let d = new Date();

		let dates = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} `

		$(".h-flex-time").each(function (index, item) {
			let obj = {
				coursetime: index + 1,
				lecturet: ''
			}
			if ($(this).find('[type="checkbox"]').is(':checked')) {
				$(this).find('.nr-time').each(function () {

					if ($(this).html() == '00:00') {
						return
					} else {
						let lastnum = dates + $(this).html() + ':00';

						let elsevar = {
							state: "1",
							createtime: getDate(),
							"userid": localStorage.getItem('user_Id'),
							"zone1": nowtimearea,
							'timequantum': $(this).html() + ':00',
							'cuyear': d.getFullYear(),
							'cumonth': d.getMonth() + 1,
							'cuday': d.getDate(),
						}
						obj.lecturet = lastnum;

						Object.assign(obj, elsevar)

						TIME.push(obj);
					}
				})
			}
		})


		let params = { 'timequantum2': TIME }


		// let pclass = {
		// 	'cuyear': d.getFullYear(),
		// 	'cumonth': d.getMonth(),
		// 	'cuday': d.getDate(),
		// 	'createtime': getDate(),
		// 	'state': 1,
		// }

		let res = await ajax('teaching_time', params, 'post');
		// let respone = await ajax('lecture_time', pclass, 'post');

		if (res && res.code == 200) {
			Dreamer.info('注册信息成功', 2000);
			teachcheck();
		} else {
			Dreamer.warning('请填写授课信息', 2000);
		}

	}

	$('.t-submit').click(function () {
		debounce(sendClass, 300)
	})


	// 生成周期
	function productweek() {
		let weekarray = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
		let timesweek = document.getElementsByClassName('h-checkbox');
		let labelarray = document.getElementsByClassName('h-label');

		for (let i = 0; i < weekarray.length; i++) {
			let week = `
			<div class="h-flex-time">
				<div class="h-flex h-p-b">
					<input type="checkbox"  checked = "checked" name="" id="${i}" value="" /><label for="${i}" class="h-label"></label>
				</div>
				<div class="h-flex time-group">
					<div class="ipts-time">
						<div class="select-custom-time">
							<strong class="nr-time">00:00</strong>
							<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
						</div>
						<div class="items-time" id="first">
						</div>
					</div>
					<span class="h-margin">至</span>
					<div class="ipts-time-fixed">
						<div class="select-custom-fixed">
							<strong class="nr-time-fixed">00:00</strong>
						</div>
					</div>
					<i class="iconfont icon-shizijiahao3 box-size"></i>
				</div>
			</div>`
			timesweek[0].innerHTML += week;
			labelarray[i].innerHTML = weekarray[i];
		}

		$('.items-time').hide();

	}
	productweek();

	// 生成item
	function producttime() {
		for (let i = 0; i < 24; i++) {
			let hour;
			if (i < 10) {
				hour = `0${i}:00`;
			} else {
				hour = `${i}:00`;
			}
			let templatetime = $("<strong class='items-btm-time'></strong>");
			templatetime.html(hour);
			$('.items-time').append(templatetime);
		}
	}
	// 时间选择器
	function handlertime() {

		$('.select-custom-time').each(function () {
			if ($(this).data('right')) {
				return
			} else {
				$(this).data('right', true);
				$(this).click(function () {
					$(this).siblings('.items-time').slideToggle('slow');
				})
			}

		});
		producttime();
		// 赋值
		$('.items-btm-time').each(function () {

			if ($(this).data('right')) {
				return
			} else {
				$(this).data('right', true);
				$(this).click(function (e) {
					e.stopPropagation();
					$(this).parent('.items-time').parent('.ipts-time').find('.nr-time').html($(this).html())

					$(this).parents().siblings('.ipts-time-fixed').find('.nr-time-fixed').html(parseInt($(this).html()) + 1 + ':00')

					$(this).parent('.items-time').slideToggle('slow');
				})
			}

		})
		// 删除
		$('.icon-shanchu').each(function () {

			$(this).click(function () {
				$(this).parent('.time-group').remove();
			})

		})
	}
	handlertime();

	// 时间选择框模板
	let template = () => {
		let div = document.createElement('div')

		let week = `<div class="h-flex time-group">
					<div class="ipts-time">
						<div class="select-custom-time">
							<strong class="nr-time">00:00</strong>
							<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
						</div>
						<div class="items-time" id="first">
						</div>
					</div>
					<span class="h-margin">至</span>
					<div class="ipts-time">
						<div class="ipts-time">
							<div class="select-custom-fixed">
								<strong class="nr-time-fixed">00:00</strong>
							</div>
						</div>
					</div>
					<i class="iconfont icon-shanchu box-size"></i> 
					<i class="iconfont icon-shizijiahao3 box-size"></i>
				</div> `
		div.innerHTML = week;
		return div
	}
	function removeclid() {
		Array.from($('.icon-shizijiahao3')).forEach(item => {
			$(item)[0].removeEventListener('click', function () { })
		})
	}

	// 模板添加
	function addclid() {
		$('.icon-shizijiahao3').each(function () {
			if ($(this).data('right')) {
				return
			} else {
				$(this).data('right', true);
				$(this).click(function () {
					let week = `<div class="h-flex time-group">
								<div class="ipts-time">
									<div class="select-custom-time">
										<strong class="nr-time">00:00</strong>
										<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
									</div>
									<div class="items-time" id="first">
									</div>
								</div>
								<span class="h-margin">至</span>
								<div class="ipts-time-fixed">
									<div class="select-custom-fixed">
										<strong class="nr-time-fixed">00:00</strong>
									</div>
								</div>
								<i class="iconfont icon-shanchu box-size"></i> 
								<i class="iconfont icon-shizijiahao3 box-size"></i>
							</div> `
					let div = document.createElement('div');
					div.innerHTML = week;
					$(this).parents('.h-flex-time')[0].appendChild(div);
					handlertime();
					addclid();
					$('.items-time').hide();
				})
			}
		})
	}
	addclid();

	// 切换
	function change(area, icon) {
		if ($('#' + icon).hasClass('ic-select-active')) {
			$('#' + icon).removeClass('ic-select-active');
			$('#' + icon).addClass('ic-select');
			$('#' + area).slideToggle("slow");
		} else {
			$('#' + icon).removeClass('ic-select');
			$('#' + icon).addClass('ic-select-active');
			$('#' + area).slideToggle("slow");
		}
	}
	// 选择框切换
	$('.ipts').click(function () {
		change('first', 'ele');
	})

	$('.items-btm').each(function () {
		$(this).click(function () {
			$("#content").html($(this).html());
			$('#ele').removeClass('ic-select-active');
			$('#ele').addClass('ic-select');
			$('#first').slideToggle("slow");
		})
	})

	if (save) {
		savebtn();

		let timeList = JSON.parse(localStorage.getItem('archives')).data[0];

		$('.save-btn').click(function () {

			$('#zone').html(timeList.zone)


		})
	}

}

// 科目
let project = (save) => {
	loadStyle('/css/teacher/project.css');
	let project = [{ name: '日常口语', price: '基础单价' }, { name: '旅游口语', price: '基础单价' }, { name: '商务汉语', price: '加10%' }, { name: '儿童汉语', price: '加10%' }, { name: 'HSK对策', price: '加10%' }, { name: 'BCT对策', price: '加10%' }, { name: 'YCT对策', price: '加10%' }, { name: 'TOCFL对策', price: '加10%' }, { name: '台湾华语', price: '' }, { name: '粤语', price: '' },
	{ name: '拼音,声调等发音特训', price: '加10%' }, { name: '汉语语法', price: '加10%' }, { name: '汉语写作', price: '加10%' }, { name: '中国文学', price: '加10%' }, { name: '2个学生在(同一个摄像头之内)', price: '加15%' },
	{ name: '汉语翻译', price: '加25%' }, { name: 'SAT Chinese', price: '加25%' }, { name: 'AP Chinese Language and Culture', price: '加25%' },
	]

	let span = document.createElement('span');
	span.innerHTML = '科目';
	span.className = 't-title';
	let div = document.createElement('div');
	let btn = document.createElement('button');
	btn.innerHTML = '保存';
	btn.className = 'p-btn';

	async function saveproject() {



		let paramstwo = {
			'skillname1': [],
		}
		let pList = new Array();

		$('[type="checkbox"]').each(function () {
			if ($(this).prop('checked')) {
				let obj = {
					skillname: '',
					'state': 1,
					'create_time': getDate(),
					'teacherid': localStorage.getItem('user_Id'),
				}
				obj.skillname = project[$(this).attr('id')];
				paramstwo.skillname1.push(obj);
			}
		})

		console.log(paramstwo);
		let res = await ajax('skill_addition', paramstwo, 'post')

		if (res && res.code == 200) {
			Dreamer.info('保存成功', 2000)
		} else {
			Dreamer.warning('保存失败', 2000)
		}

	}
	btn.onclick = function () {

		debounce(saveproject.bind(this), 300)


	}
	let label;
	let label2;
	let label3;
	let appchildnode = document.getElementsByClassName('teach-container');


	project.forEach((item, index) => {

		let projectcheck = document.createElement('input');
		projectcheck.type = 'checkbox';
		projectcheck.id = index;
		$(projectcheck).data('v-checkbox', 'chekbox');


		let divwrap = document.createElement("div");
		let divnext = document.createElement("div");

		divwrap.className = 'box-flex'

		label = document.createElement('label');
		label.setAttribute('for', index);
		label.innerHTML = item.name;

		label2 = document.createElement('label');
		label2.setAttribute('for', index);
		label2.innerHTML = "usd";
		label2.style.marginRight = "120px"

		label3 = document.createElement('label');
		label3.setAttribute('for', index);
		label3.innerHTML = item.price;
		label3.className = 'label3';


		div.appendChild(projectcheck);
		divwrap.appendChild(label);
		divnext.appendChild(label2);
		divnext.appendChild(label3);
		divwrap.appendChild(divnext);
		div.appendChild(divwrap);
	})
	label.style.cursor = 'pointer';
	div.className = 'p-flex';
	appchildnode[0].appendChild(span);
	appchildnode[0].appendChild(div);
	appchildnode[0].appendChild(btn);

	async function init() {

		let params = {
			'token': localStorage.getItem('Token')
		}
		let { data } = await ajax('teacher_query_skill', params, 'post')

		console.log(data)

		let indexchekbox = [];

		data.forEach((item, index) => {

			let ind = project.findIndex((ele, i) => {

				return ele == item.skillname
			})

			indexchekbox.push(ind);

		})
		let dataList = Array.from(new Set(indexchekbox));

		dataList.forEach((item, index) => {
			$('[type="checkbox"]').eq(item).prop('checked', true);
		})

	}

	init();
}

let checkFile = () => {
	loadStyle('/css/teacher/checkfile.css');
	let ftemplate = `
	<span class="f-title">通过验证后，我们将消除您的个人信息。验证最多需要3个工作日</span>
	<article class="f-art">
		<span class="second-title">个人身份验证</span>
		<div class="f-article">
			<i class="iconfont icon-dunpai1 f-size"></i>
			<p>
				请使用护照，身份证，或其他官方ID来验证。一旦验证，您就可以安全提现。另外我们会给您加<br/>
				上一个用通过验证的徽标。
			</p>
		</div>
		<div class="last-box">
			<button type="button" class="f-btn">
				<input type="file" name="" id=""  value="" accept="image/x-png,image/jpg" class="f-file"  onchange="uploadImgMethod(this,0)"/>
				立即验证
			</button>
		</div>
		<div class="reviewimage">
			
		</div>
	</article>
	<section class="f-art">
		<span class="second-title">中文教师证书验证</span>
		<div class="f-section-special">
			<div class="f-flex-yz">
				<i class="iconfont icon-shouquanzhengshu1 f-authsize"></i>
				<div class="first-box">
					<span class="certificate">上传您的中文教师证书</span>
					<p class="badge">获取中文教师证书已验证徽章。</p>
					<div class="last-box">
						<button type="button" class="upload-btn">
							<input type="file" name="" id="" accept="image/x-png,image/jpg" value=""  class="f-file"  onchange="uploadImgMethod(this,1)" />
							上传
						</button>
						<span class="upload-tips">JPG或PNG格式:最大为3MB</span>
					</div>
				</div>
			</div>
			<div class="reviewimage">
				
			</div>
		</div>
		<div class="add-upload">
			<i class="iconfont icon-jia f-add-icon"></i><label class="f-add">添加另一个证书</label>
		</div>
	</section>
	<section class="f-art">
		<span class="second-title">学历验证</span>
		<div class="f-section">
			<div class="f-flex-yz">
				<i class="iconfont icon-shouquanzhengshu f-authsize-red"></i>
				<div class="first-box">
					<span class="certificate">上传您的最终毕业证书</span>
					<p class="badge">获取学历已验证徽章，提高信誉。。</p>
					<div class="last-box">
						<button type="button" class="upload-btn">
							<input type="file" name="" id="" accept="image/x-png,image/jpg"  value="" class="f-file" onchange="uploadImgMethod(this,2)" />
							上传
						</button>
						<span class="upload-tips">JPG或PNG格式:最大为3MB</span>
					</div>
				</div>
			</div>
			<div class="reviewimage">
				
			</div>
		</div>
	</section>
	<section class="f-art">
		<span class="second-title">中文教学经验</span>
		<div class="f-last-box">
			<p class="unitname">单位名称</p>
			<input type="text" name="" id="company" value="" class="f-ipt"/>
		</div>
		<div class="f-two-box">
			<p class="unitname">雇佣时期</p>
			<div class="f-flex">
				<select id="starttime" size="1" >
					
				</select>
				<p class="line-file"></p>
				<select id="endtime" size="1">
				</select>
			</div>
		</div>
	</section>
	<button type="button" class="save-btn file-btn">保存</button>`
	let teachercontainer = document.getElementsByClassName('teach-container');

	teachercontainer[0].innerHTML = ftemplate;


	let d = new Date();
	let end = d.getFullYear();
	let starttime = $("#starttime")
	let endtime = $("#endtime")
	for (let i = 1960; i < end + 1; i++) {
		let option = `<option value =${i}>${i}</option>`
		$("#starttime").append(option);
	}
	$('body').css('padding-bottom', '20px');


	$('#starttime').change(function () {
		let d = new Date();
		let end = d.getFullYear();
		let starttime = $('#starttime option:selected').val();
		for (let i = Number(starttime); i < end + 1; i++) {
			let option = `<option value =${i}>${i}</option>`
			endtime.append(option);
		}

	})

	// 新增
	$('.add-upload').click(function () {

		let filetemp = `
			<div class="f-section-special">
				<div class="f-flex-yz">
					<i class="iconfont icon-shouquanzhengshu1 f-authsize"></i>
					<div class="first-box">
						<span class="certificate">上传您的证书</span>
						<div class="last-box">
							<button type="button" class="upload-btn">
								<input type="file" name="" id="" value="" accept="image/x-png,image/jpg"  class="f-file" onchange="uploadImgMethod(this,1)" />
								上传
							</button>
							<span class="upload-tips">JPG或PNG格式:最大为8kB</span>
						</div>
					</div>
				</div>
				<div class="reviewimage">
					
				</div>
			</div>`
		$(this).before(filetemp);
	})

	// let identityCard = [], tempimg = [], certificate, degree = [];
	// 获取数组上传地址


	let imgurl = [];
	async function sendfile() {

		$('.reviewimage .imgclass ').each(function (item, index) {

			imgurl.push($(this).attr('src'));

			console.log($(this).attr('src'));
		})

		if (imgurl.length < 4) {


			Dreamer.warning('请上传图片至少4张', 2000)


			return false
		}


		if (!$('#company').val()) {

			Dremaer.warning('请填写公司名称', 2000)

			return false

		} else if (!$('#endtime option:selected').val()) {

			Dremaer.warning('请填写雇佣时期', 2000)

			return false

		}

		console.log(imgurl);

		console.log(fileImgList);

		let identityCard = [imgurl[0], imgurl[1]];

		let tempimg = imgurl.slice(2, imgurl.length - 1);

		let certificate = tempimg.join('&');

		let degree = imgurl[imgurl.length - 1];


		console.log(identityCard, tempimg)
		console.log(certificate, degree)


		let params = {
			teacherid: localStorage.getItem('user_Id'),
			sfzpositive: identityCard[0],
			sfznegative: identityCard[1],
			school: certificate,
			degreecategory: degree,
			employmenttime: $('#starttime option:selected').val(),
			employmentendtime: $('#endtime option:selected').val(),
			corporatename: $('#company').val(),
			createtime: getDate(),
			state: 1,
		}

		let res = await ajax('personal_configuration_add', params, 'post');

		if (res && res.code == 200) {

			Dreamer.info('保存成功', 2000);
			window.location.reload();

		} else {

			Dreamer.warning('保存失败', 2000)

		}

		console.log('params', params)
	}

	$('.file-btn').click(function () {


		debounce(sendfile.bind(this), 300)

	})

}


// 教学知识
let teacheKnowledge = () => {
	loadStyle('/css/teacher/knowledge.css')
	let template = `
			<div class="k-container">
			<h3 class="k-title"></h3>
			<div class="k-process-box">
				<ul class="process-item"></ul>
				<span class="k-tips">一共分5部分，每通过一部分，就获得一颗星。</span>
			</div>
			<div class="problem-box">
				<!-- <div class="question-box">
						<div class="k-t-box">
							<span class="k-q-title">请介绍一下汉语的定义。</span>
						</div>
						<textarea rows="" cols="" placeholder="模板模板模板模板模板模板模板模板模板模板"></textarea>
					</div>
					<div class="k-btn">
						<button type="button">暂时保存</button>
						<button type="button">第二部分</button>
					</div> -->
			</div>
		</div>
		`
	let teachercontainer = document.getElementsByClassName('teach-container');

	teachercontainer[0].innerHTML = template;

	let items = $('.process-item');

	function stars(light = 1) {
		// 清空
		items.html('');
		for (var i = 0; i < 5; i++) {
			if (i < light) {
				let i = $('<div class="k-box"><i class="iconfont icon-queren k-size"></i></div>');
				items.append(i);
			} else {
				let li = $('<li></li>');
				items.append(li);
			}
		}
	}

	let titlelist = ['第一部分 基础知识',
		'第二部分 拼音和声调',
		'第三部分 HSK1，2，3级以下语法',
		'第四部分  HSK3，4级语法',
		'第五部分 HSK5，6级语法',
	];

	let problembox = $('.problem-box');
	// 教学知识1
	let firstlist = ['请介绍一下汉语的定义。',
		'请简单介绍一下"汉语"，"普通话"，"中文"，"华语"，"国语"等各种说法。',
		'拼音是什么时候确立的，意义，作用和你所发现的不足之处。',
		'你了解繁体字，简体字的历史，现状，以及使用地区吗？'
	];
	// 教学知识2	
	let secondlist = ['怎么样向学生说明 "zi, ci, si, zhi, chi, shi, ri" 的发音？。',
		'如何说明 "e" 的发音',
		'如何说明 "ü(yu)" 的发音',
		'请说一下"ian"和"iang"的发音区别',
		'请说出6对送气音和不送气音，并解释区别',
		'怎样给学生讲解声调（四声及轻声）？',
		'说明第三声的变调',
		'说明第三声的变调'
	];
	//教学知识3
	let thirdlist = ['“的”、“地”、“得”的区别和用法',
		'说明存现句的”有”，”在”，”是”',
		'举例说明能愿动词”能”，”会”，”可以”的用法',
		'举例说明”是……的”的句型',
		'"不"和"没"用在动词前的区别',
		'“高高兴兴”与  “高兴高兴”有什么不同？',
		'说明”的”用法，什么时候用，什么时候省略',
		'"要"作为助动词的时候，有哪些用法?',
		'"有点儿"和"一点儿"的区别',
		'“想” 和“要”都可以表示个人的愿望，打算。它们有什么不同。',
		'解释一下"我来介紹一下"中的"来"的意思',
		'助动词"会"的用法',
		'"二"和"两"的区别',
		'说明一下"被"字句',
	];

	// 教学知识4
	let fourthlist = [
		'总结”了”的用法',
		'说明”在”的主要4种用法',
		'分析”又”，”再”，”还”的区别',
		'举例说明”给”，”对”，”向”，”往”的用法',
		'举例说明”把”字句存在意义和结构',
		'什么情况下不能使用动词重叠？',
		'"从"和"离"的区别',
		'“都不”与“不都"的不同',
		'动词前"就"和"才"的对比',
		'举例说明什么是离合词，以及用法',
		'"我们"和"咱们"的区别',
		'"因此"和"于是"的不同',
	];

	//教学知识5
	let fifthlist = [
		'差点儿迟到和差点没迟到的意思一样吗？',
		'表示转折的“但是”、“只是”与“不过”的用法区别',
		'“怎么”有时也有问原因的意思，这时它和“为什么”有什么不同？',
		'“为了“和“为“的用法区别',
		'举例说明"忽然""突然"的用法区别',
		'举例说明关联词”即使”，”尽管”，”不管/无论”的用法 , 区别，意思，以及后半部分如何接续',
		'"没听懂"和"听不懂"的区別',
		'请解释“以后”与“后来”的用法区别',
		'作为结果补语的“过来”和“过去”的用法区别',
		'“关于”与“至于”在用法上的区别',
		'"一定"和"必须"的区别',
	]

	let titletext = $('.k-title');




	function getanswerview(title, lightstar, arr, now) {

		// 清空内容，避免重复
		problembox.html('');

		// 设置标题
		titletext.html(titlelist[title]);

		// 星星数量显示
		stars(lightstar);

		arr.forEach((item, index) => {
			let templatearea = `<div class="question-box">
									<div class="k-t-box">
										<span class="k-q-title">${item}</span>
									</div>
									<textarea rows="" cols="" placeholder=""></textarea>
								</div>`
			problembox.append(templatearea);
		})

		let groupbtn = $('<div class="k-btn"></div>');
		let btnfirst = $('<button type="button">上一步</button>');
		let btnsecond = $('<button type="button">下一步</button>');


		function whiteanswer(firstindex, secondindex) {

			console.log('knowledgeList', knowledgeList)

			let content = knowledgeList.slice(firstindex, secondindex)

			console.log('content', content)

			$('textarea').each(function (index, item) {

				$(this).val(content[index].answer)
				$(this).attr('disabled', true)
			})

		}

		switch (now) {

			case 1:

				// 填写答案
				whiteanswer(0, firstlist.length);

				btnsecond.click(function () {

					getanswerview(1, 2, secondlist, 2);


				})
				groupbtn.append(btnsecond);
				break;

			case 2:

				console.log(firstlist.length, secondlist.length)

				// 填写答案
				whiteanswer(firstlist.length, firstlist.length + secondlist.length);

				btnfirst.click(function () {

					getanswerview(0, 1, firstlist, 1);
				})

				btnsecond.click(function () {

					getanswerview(2, 3, thirdlist, 3);


				})
				groupbtn.append(btnfirst);
				groupbtn.append(btnsecond);
				break;
			case 3:

				// 填写答案
				whiteanswer(secondlist.length, secondlist.length + thirdlist.length);

				btnfirst.click(function () {

					getanswerview(1, 2, secondlist, 2);
				})

				btnsecond.click(function () {

					getanswerview(3, 4, fourthlist, 4);


				})
				groupbtn.append(btnfirst);
				groupbtn.append(btnsecond);
				break;
			case 4:

				// 填写答案
				whiteanswer(thirdlist.length, thirdlist.length + fourthlist.length);

				btnfirst.click(function () {

					getanswerview(2, 3, thirdlist, 3);
				})

				btnsecond.click(function () {

					getanswerview(4, 5, fifthlist, 5);


				})
				groupbtn.append(btnfirst);
				groupbtn.append(btnsecond);
				break;
			case 5:

				// 填写答案
				whiteanswer(fourthlist.length, fourthlist.length + fifthlist.length);

				btnfirst.click(function () {

					getanswerview(3, 4, fourthlist, 4);
				})

				groupbtn.append(btnfirst);
				break;
		}

		// groupbtn.append(btnfirst);
		// groupbtn.append(btnsecond);
		problembox.append(groupbtn);

	}


	// 生成题目
	function productexecise(title, lightstar, arr, now) {

		// 清空内容，避免重复
		problembox.html('');

		// 设置标题
		titletext.html(titlelist[title]);

		// 星星数量显示
		stars(lightstar);

		arr.forEach((item, index) => {
			let templatearea = `<div class="question-box">
									<div class="k-t-box">
										<span class="k-q-title">${item}</span>
									</div>
									<textarea rows="5" cols="" maxlength="400" placeholder=""></textarea>
								</div>`
			problembox.append(templatearea);
		})

		// 设置按钮
		let groupbtn = $('<div class="k-btn"></div>');
		let btnfirst = $('<button type="button">暂时保存</button>');
		let btnsecond = $('<button type="button"></button>');


		$(function () {

			let answerList = JSON.parse(localStorage.getItem('answer'))


			$('textarea').each(function (index, item) {


				$(this).val(answerList[index])

			})



		})

		$('textarea').bind("contextmenu", function () {

			Dreamer.warning('禁止粘贴', 2000)

			return false;

		});


		// 判断是否填写试题
		function fifters(params) {

			let textarea = document.getElementsByTagName('textarea')

			let istrue = Array.from(textarea).some(function (item, ind) {

				return item.value == false
			})

			return istrue

		}

		// 答案数组
		var answer = [];

		function arrayStorage() {

			// 清空内容
			answer = []

			$('textarea').each(function () {

				answer.push($(this).val())

			})

			localStorage.setItem('answer', JSON.stringify(answer))

		}


		// 提交试题
		function apisend(arr, pidList, state = 0) {

			console.log('pidList', pidList)

			// 获取全部答案
			let daan = [];
			$('textarea').each(function () {

				daan.push($(this).val())

			})

			let isok = arr.every(async (item, index) => {

				let params = {
					"subjectlist": [{ "teacherid": parseInt(localStorage.getItem('user_Id')), "subject": item, "answer": daan[index], "parentid": pidList[index], "createtime": getDate(), "state": state == 1 && index === (arr.length - 1) ? 1 : 0 }]
				}
				let res = await ajax('knowledge_education_add', params, 'post');

				return res && res.code == 200
			})

			return isok

		}

		async function apirequest(arr) {
			function run() {
				let ArraysList = [];
				return new Promise(async (resolve, reject) => {

					arr.forEach(async (item, index) => {
						let params = {
							"subjectlist": [{ "teacherid": parseInt(localStorage.getItem('user_Id')), "subject": item, "answer": null, "parentid": null, "createtime": getDate(), "state": 0 }]
						}
						let res = await ajax('knowledge_education_add', params, 'post');

						ArraysList.push(res.data[0].id)

						if (index === arr.length - 1) {

							setTimeout(() => {
								resolve(ArraysList)
							}, 100)
						}
					})

				})
			}
			return run()
		}

		switch (now) {
			case 1:
				btnfirst.click(function () {


					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					arrayStorage();

					Dreamer.info('保存成功', 2000);

				})
				btnsecond.html('第二部分');
				btnsecond.click(async function () {

					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					let stroageList = await apirequest(firstlist).then(res => {

						return res
					});

					let isok = await apisend(firstlist, stroageList)


					console.log(stroageList)
					console.log(isok)


					if (isok) {
						localStorage.removeItem('answer');
						productexecise(1, 2, secondlist, 2);
					}

				})
				break;
			case 2:
				btnfirst.click(function () {
					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					arrayStorage();

					Dreamer.info('保存成功', 2000);
				})
				btnsecond.html('第三部分');
				btnsecond.click(async function () {

					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					let stroageList = await apirequest(secondlist).then(res => {

						return res
					});

					let isok = await apisend(secondlist, stroageList)




					if (isok) {

						localStorage.removeItem('answer');
						productexecise(2, 3, thirdlist, 3);

					}


				})
				break;
			case 3:
				btnfirst.click(function () {
					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					arrayStorage();

					Dreamer.info('保存成功', 2000);

				})
				btnsecond.html('第四部分');
				btnsecond.click(async function () {

					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					let stroageList = await apirequest(thirdlist).then(res => {

						return res
					});

					let isok = await apisend(thirdlist, stroageList)


					if (isok) {

						localStorage.removeItem('answer');
						productexecise(3, 4, fourthlist, 4);

					}

				})
				break;
			case 4:
				btnfirst.click(function () {

					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					arrayStorage();

					Dreamer.info('保存成功', 2000);
				})
				btnsecond.html('第五部分');
				btnsecond.click(async function () {


					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					let stroageList = await apirequest(fourthlist).then(res => {

						return res
					});

					let isok = await apisend(fourthlist, stroageList)

					if (isok) {

						productexecise(4, 5, fifthlist, 5);

					}

				})
				break;
			case 5:
				btnfirst.click(function () {
					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					arrayStorage();
					Dreamer.info('保存成功', 2000);
				})
				btnsecond.html('提交');
				btnsecond.click(async function () {

					let iscomplete = fifters();

					if (iscomplete) {

						Dreamer.warning('请正确填写试题', 2000);

						return false
					}

					let stroageList = await apirequest(fifthlist).then(res => {

						return res
					});

					let isok = await apisend(fifthlist, stroageList, 1)


					if (isok) {
						let iswhite = await ajax('query_complete', {}, 'post');

						if (iswhite && iswhite.code == 200) {

							let isstate = iswhite.data.some((item) => item.state == 1)
							if (isstate) {

								knowledgeList = iswhite.data;
								getanswerview(0, 1, firstlist, 1);


							}
						}
						Dreamer.info('保存成功', 2000);

					}

				})
				break;
		}
		groupbtn.append(btnfirst);
		groupbtn.append(btnsecond);
		problembox.append(groupbtn);

	}

	let knowledgeList;

	$(document).ready(async function () {


		let iswhite = await ajax('query_complete', {}, 'post');


		if (iswhite && iswhite.code == 200) {

			let isstate = iswhite.data.some((item) => item.state == 1)
			if (isstate) {

				knowledgeList = iswhite.data;
				getanswerview(0, 1, firstlist, 1);


			} else {

				productexecise(0, 1, firstlist, 1);

			}


		} else {

			productexecise(0, 1, firstlist, 1);


		}
	})

	$('textarea').on("contextmenu", function () {

		Dreamer.warning('禁止粘贴', 2000)

		return false;

	});

	document.onkeydown = function (e) {

		if (e.keyCode == 86 && e.ctrlKey) {

			Dreamer.warning('禁止粘贴', 2000)

			return false
		}

		if (e.keyCode == 67 && event.ctrlKey) {

			Dreamer.warning('禁止复制', 2000)

			return false
		}
	}

}


export { information, photo, description, teachcheck, teachervideo, project, teacherclass, checkFile, teacheKnowledge }
